<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{len}}</strong></span>
    <ul class="filters" @click="fn1">
      <li>
        <a :class="this.isSel=='all'?'selected':''" @click.prevent="isSel='all'" >全部</a>
      </li>
      <li>
        <a :class="this.isSel=='no'?'selected':''" @click.prevent="isSel='no' ">未完成</a>
      </li>
      <li>
        <a :class="this.isSel=='yes'?'selected':''" @click.prevent="isSel='yes' " >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="delmadedlist" >清除已完成</button>
  </footer>
</template>

<script>
export default {
props:["len"],
  data(){
  return{
    isSel:''
  }
  },
  methods:{
  fn1(){
    this.$emit("changgeType",this.isSel)
    },
    delmadedlist(){
      this.$emit("dellll")
    }
  }
}
</script>